<template>
  <div id="wrap" class="wrap">
    <draggable
      v-model="pageData.componentList"
      class="draggable"
      group="people"
      :style="pageStyle"
      @change="changePositon"
      @end="onEnd"
    >
      <div v-for="element in pageData.componentList" :key="element.id" class="components">
        <componentResolve v-if="element.data.component !== 'blank'" :component-config-prop="element" />
        <div v-else class="blankComponent">
          <div>组件放置区域</div>
        </div>
      </div>
      <div class="preview-height-tag">
        <span class="preview-height-tag-tex">iPhone 8手机高度</span>
      </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {mapMutations} from 'vuex'

import componentResolve from '@/components/componentResolve'
import Postmessage from '@/utils/Postmessage'
export default {
  name: 'Page',
  components: {
    componentResolve,
    draggable
  },
  data: function () {
    return {
    }
  },
  computed: {
    pageData: {
      get: function () {
        return this.$store.getters.pageData
      },
      set: function (newValue) {
      }
    },
    pageStyle() {
      const s = {
        backgroundColor: this.pageData.backgroundColor,
        backgroundPosition: `center ${this.pageData.backgroundPosition}`
      }

      if (this.pageData.backgroundImage) {
        s.backgroundImage = `url(${this.pageData.backgroundImage})`
      }

      return s
    }
  },
  mounted() {
    Postmessage.listenMessage()
    this.getComponentsTop()
  },
  methods: {
    changePositon(e) {
      let {newIndex, oldIndex, element} = e.moved
      this.$store.commit('changeComponentPosition', {newIndex, oldIndex, element})
    },
    onEnd(e) {
      e.preventDefault()
      e.stopPropagation()
    },
    ...mapMutations(
      [
        'getComponentsTop'
      ]
    )
  }
}
</script>

<style scoped>
.wrap{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.draggable{
  box-shadow: 0 0 14px 0 rgb(0 0 0 / 10%);
  position: relative;
  width: 375px;
  min-height: 700px;
  border: solid 1px #eee;
  border-radius: 2px;
  /* background: #fff; */
  overflow: visible;
  background-repeat: no-repeat;
  background-size: 100% auto;
  perspective: 100px;
}
.blankComponent{
  height: 60px;
  background:  #85c1e9 ;
  display: flex;
  align-items: center;
  justify-content: center;
  border: dotted 2px #aaa;
}
.blankComponent div{
  width: 160px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background:  #3498db;
}
.blankComponent{
  height: 60px;
  background:  #85c1e9 ;
  display: flex;
  align-items: center;
  justify-content: center;
  border: dotted 2px #aaa;
}
.blankComponent div{
  width: 160px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background:  #3498db;
}
.preview-height-tag{
  position: absolute;
  left: -150px;
  top: 649px;
  width: 130px;
  display: flex;
  color: #a2a2a2;
  border-bottom: 1px solid #dedede;
}
.preview-height-tag-tex{
  padding-top: 4px;
  font-size: 12px;
}
</style>
